import React, { memo } from "react";
import { NavLink } from "react-router-dom";
import { AlbumImgStyle } from "./style";
import { getSizeImage } from "@/utils/format-utils";

export default memo(function AlbumImg(props) {
  return (
    <AlbumImgStyle>
      <div className="new-album-s-box">
        <div className="new-album-imgbox">
          <NavLink
            to={{
              pathname: "/album",
              search: "?id=" + props.id,
            }}
          >
            <img src={getSizeImage(props.url, 130)} alt="" />
            <div className="msk coverall"></div>
          </NavLink>
          <i className="playbtn"></i>
        </div>
        <div className="new-album-name">
          <span>
            <NavLink
              to={{
                pathname: "/album",
                search: "?id=" + props.id,
              }}
            >
              {props.name}
            </NavLink>
          </span>
          <span>
            <NavLink
              to={{
                pathname: "/artist",
                search: "?id=" + props.artistId,
              }}
            >
              {props.artistName}
            </NavLink>
          </span>
        </div>
      </div>
    </AlbumImgStyle>
  );
});
